<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>conditional</title>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>
  <div id="app">

    <!-- 条件判断
          v-if
          条件判断使用 v-if 指令： 
      v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

       Handlebars 模板
        {{#if ok}}
        <h1>Yes</h1>
        {{/if}}
    -->
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术，更是梦想!</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
    <br><br>

    <!-- v-else
         可以用 v-else 指令给 v-if 添加一个 "else" 块：
    -->
    <div v-if="Math.random() > 0.5">Sorry</div>
    <div v-else>Not sorry</div>
    <br><br>

    <!--    
      v-else-if
        v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。 
        v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
    -->
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>

    <!-- v-show
         我们也可以使用 v-show 指令来根据条件展示元素： 
    -->
    <h1 v-show="ok">Hello!</h1>
  </div>

  <script>
    new Vue({
      el: "#app",
      data: {
        seen: true,
        ok: true,
        type: 'C'
      }
    })
  </script>
</body>

</html>